<template>
  <div>
    <div ref="legend" style="width: 400px;height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted () {
    this.setLegend()
  },
  methods: {

    setLegend () {
      const objIcon = {
        "销--量": '淘宝--销--量',
        利润: '3月--利润',
        产量: '4月产量'
      }
      const obj = echarts.init(this.$refs.legend)
      // 给初始化好的对象,配置选
      const option = {
        title: {
          text: "标题"
        },
        // 指明当前的数据是什么类型的
        legend: {
          // 普通的图例,scroll
          type: 'plain',
          // 格式化,文字的
          // formatter: '3月 {name}',
          // 使用回调函数
          formatter: function (name) {
            return objIcon[name]
          },
          data: [{
            name: '销--量',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
              color: 'red'
            }
          },
          '利润', "产量"]
        },
        // 柱状图
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        // 系列,系列里边有多个数据
        series: [
          {
            name: '销--量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '产量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      obj.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
